<template>

  <div>
    <header style="text-align: right">
      <el-button type="primary" icon="el-icon-plus" @click="addGridVisible = true">新增</el-button>
    </header>
    <AzureDynamicTable :data="data" :column-des-objs="columnDesObjs" :show-seq="true">
      <template slot="operator" slot-scope="{scope:{row}}">
        <el-button type="primary" @click="openEdit(row)">修改</el-button>
        <el-button type="danger" @click="openDelete(row)">删除</el-button>
      </template>
    </AzureDynamicTable>


    <el-dialog :visible.sync="addGridVisible" title="存储产品类别" @close="closeDialog">
      <el-form label-width="80px" :model="addForm" ref="addForm">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="分区名称" prop="Name">
              <el-input v-model="addForm.Name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="横向格子" prop="HNum">
              <el-input-number v-model="addForm.HNum"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纵向格子" prop="VNum">
              <el-input-number v-model="addForm.VNum"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="开头字母" prop="HeadName">
              <el-input v-model="addForm.HeadName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工位" prop="WorkstationId">
              <ASelect :options="selectOption" :val-attr-name="'WorkstationId'" :label-attr-name="'Name'"
                       :value.sync="addForm.WorkstationId"></ASelect>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否启用" prop="Status">
              <el-switch v-model="addForm.Status" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <AzureDynamicTable :data="categoryData" :column-des-objs="categoryColumnDesObjs" :show-seq="true"
                         @selection-change="select" ref="addTable">
        <template slot="selection">
          <el-table-column
            align="center"
            fixed="left"
            type="selection"
            width="55"
          >
          </el-table-column>
        </template>
      </AzureDynamicTable>

      <div slot="footer">
        <el-button @click="addGridVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAdd">确定</el-button>
      </div>
    </el-dialog>


    <el-dialog :visible.sync="editGridVisible" title="存储产品类别修改" @close="closeEditDialog">
      <el-form label-width="80px" :model="addForm" ref="editForm">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="分区名称" prop="Name">
              <el-input v-model="editForm.Name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="横向格子" prop="HNum">
              <el-input-number v-model="editForm.HNum"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纵向格子" prop="VNum">
              <el-input-number v-model="editForm.VNum"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="开头字母" prop="HeadName">
              <el-input v-model="editForm.HeadName"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="工位" prop="WorkstationId">
              <ASelect :options="selectOption" :val-attr-name="'WorkstationId'" :label-attr-name="'Name'"
                       :value.sync="editForm.WorkstationId"></ASelect>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="是否启用" prop="Status">
              <el-switch v-model="editForm.Status" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
      <AzureDynamicTable :data="categoryData" :column-des-objs="categoryColumnDesObjs" :show-seq="true"
                         @selection-change="handleSelectChange" ref="editTable">
        <template slot="selection">
          <el-table-column
            align="center"
            fixed="left"
            type="selection"
            width="55"
          >
          </el-table-column>
        </template>
      </AzureDynamicTable>

      <div slot="footer">
        <el-button @click="editGridVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">确定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
  import { ModifyGridArea, AddGridArea, DeleteGridArea } from '@/api/storageConfig'
  import { ERR_OK } from '@/utils/commons'
  import { deepClone } from '@/utils'
  import ASelect from '@/components/ATheFridayClub/ASelect'

  export default {
    name: 'gridSetUp',
    components: { AzureDynamicTable, ASelect },
    props: {
      data: {
        type: Array
      },
      columnDesObjs: {
        type: Array
      },
      categoryData: {
        type: Array
      },
      categoryColumnDesObjs: {
        type: Array
      },
      selectOption: {
        type: Array
      }
    },
    data() {
      return {
        addGridVisible: false,
        editGridVisible: false,
        addForm: {
          ProductCombineAreaId: 0,
          Name: '',
          CombineType: 0,
          WorkstationId: '',
          HNum: 0,
          VNum: 0,
          HeadName: '',
          Status: 1,
          ProductCategoricalVos: []
        },
        editForm: {},
        checkedList:[]
      }
    },
    created() {
    },
    methods: {
      select(val) {
        console.log(val, 67)
        this.addForm.ProductCategoricalVos = val
      },
      handleSelectChange(val){

      },
      /*
      * 提交新增
      * */
      async submitAdd() {
        const { Result, Code } = await AddGridArea({ ...this.addForm })
        if (Code === ERR_OK) {
          this.$message.success('新增成功！')
          this.addGridVisible = false
          this.getData()

        }
      },
      /*
      * 获取数据
      * */
      getData() {
        this.$emit('initData')
      },
      /*
      * 关闭新增dialog
      * */
      closeDialog() {
        this.addGridVisible = false
        this.$refs.addForm.resetFields()
        this.toggleSelection()
      },
      /*
      * 关闭修改dialog
      * */
      closeEditDialog() {
        this.editGridVisible = false
        this.$refs.editForm.resetFields()
        this.handleEditSelection()
      },
      /*
      * 新增dialog关闭时清楚选中
      * */
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.addTable.setCurrentRow(row)
          })
        } else {
          this.$refs.addTable.clearMultiSelected()
        }
      },
      /*
      * 修改dialog关闭时清楚选中
      * */
      handleEditSelection(rows){
        if(rows){
          row.forEach(row =>{
            this.$refs.editTable.setCurrentRow(row)
          })
        }else {
          this.$refs.editTable.clearMultiSelected()
        }
      },
      /*
      * 打开修改dialog
      * */
      openEdit(row) {
        this.editGridVisible = true
        this.editForm = deepClone(row)
        this.checkedList = this.editForm.ProductCategoricalVos
        this.$nextTick(()=>{ //打开时多选框回显
          this.categoryData.forEach((v,i) =>{
            this.checkedList.forEach((_v,_i) =>{
              if(v.CategoricalId === _v.CategoricalId){
                this.$refs.editTable.$refs.azureTable.toggleRowSelection(v,true)
              }
            })
          })
        })

      },
      /*
      * 提交修改
      * */
      submitEdit() {
        ModifyGridArea({ ...this.editForm }).then(({ Code, Result }) => {
          if (Code === ERR_OK) {
            this.$message.success('修改成功！')
            this.editGridVisible = false
            this.getData()
          }
        })

      },
      /*
      * 打开删除
      * */
      openDelete(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { ProductCombineAreaId } = row
          console.log(row, 229)
          const { Result, Code } = await DeleteGridArea({ productCombineAreaId: ProductCombineAreaId })
          if (Code === ERR_OK) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getData()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
